/**
 * @Description:分栏布局
 * @Author:zqy
 * @Date:2022-08-19 11:13:12
 * @Last Modified by: zqyy
 * @Last Modified time: 2022-08-19 11:13:488
*/

function modifPropsData(vnode, key, value) {
  if (!vnode.componentOptions) {
    return
  }
  const propsData = vnode.componentOptions.propsData || {}
  propsData[key] = [value, propsData[key]].join(' ').replace(/^ /, '')
}
function setPropsData(vnode, key, value) {
  if (!vnode.componentOptions) {
    return
  }
  const propsData = vnode.componentOptions.propsData || {}
  if (propsData[key]===undefined) {
    propsData[key] = value
  }
}
// 如果listItem上设置了span，则使用该span
function setSpan(vnode, span) {
  if (vnode.data.attrs && vnode.data.attrs.span) {
    return vnode.data.attrs.span
  } else {
    return span
  }
}
export default {
  name: 'QupList',
  props: {
    column: {
      type: Number,
      default: 1
    },
    gutter: {
      // 栅格间隔
      type: Number,
      default: 12
    },
    type: {
      // 布局模式，可选 flex，现代浏览器下有效
      type: String,
      default: 'flex'
    },
    wrap: {
      // 换行模式，flex-wrap 属性值，(默认 wrap)
      type: String,
      default: 'wrap'
    },
    align: {
      // flex 布局下的垂直排列方式
      type: String,
      default: 'stretch'
    },
    justify: {
      // flex 布局下的水平排列方式
      type: String,
      default: ''
    },
    sep: {
      type: String,
      default: ''
    },
    itemClassName: {
      type: String,
      default: ''
    },
    labelClassName: {
      type: String,
      default: 'label-style'
    },
    labelWidth: {
      type: [String,Number],
      default: 'auto'
    },
    labelPosition: {
      type: String,
      default: '' // left,right,justify
    },
    valueClassName: {
      type: String,
      default: ''
    },
    defaultValue: {
      type: String,
      default: ''
    },
    ellipsis:{
      type:Boolean,
      default:false
    },
    xs: {
      type: [Number, Object],
      default: () => ({})
    },
    sm: {
      type: [Number, Object],
      default: () => ({})
    },
    md: {
      type: [Number, Object],
      default: () => ({})
    },
    lg: {
      type: [Number, Object],
      default: () => ({})
    },
    xl: {
      type: [Number, Object],
      default: () => ({})
    }
  },
  render(h) {
    const span = Math.floor(24 / this.column)
    const childrens = this.$scopedSlots.default ? this.$scopedSlots.default() : []
    const items = []
    for (const children of childrens) {
      if (!children.tag) {
        continue
      }
      modifPropsData(children, 'sep', this.sep)
      modifPropsData(children, 'labelClassName', this.labelClassName)
      modifPropsData(children, 'valueClassName', this.valueClassName)
      modifPropsData(children, 'itemClassName', this.itemClassName)
      modifPropsData(children, 'defaultValue', this.defaultValue)
      setPropsData(children, 'labelWidth', this.labelWidth)
      setPropsData(children, 'labelPosition', this.labelPosition)
      setPropsData(children, 'ellipsis', this.ellipsis)
      const elCol = h('el-col', {
        props: {
          span: setSpan(children, span),
          xs: this.xs,
          sm: this.sm,
          md: this.md,
          lg: this.lg,
          xl: this.xl
        }
      }, [children])
      if (children.data.directives) {
        if (!elCol.data) {
          elCol.data = {}
        }
        if (!elCol.data.directives) {
          elCol.data.directives = []
        }
        elCol.data.directives = [...elCol.data.directives, ...children.data.directives]
      }
      items.push(elCol)
    }
    const style = {}
    if (this.type === 'flex') {
      style.flexWrap = this.wrap
    }
    return h('el-row', {
      props: {
        gutter: this.gutter,
        type: this.type,
        justify: this.justify,
        align: this.align
      },
      style
    }, items)
  }
}
